<template>
 <div class="topTap2">
     <div class="topTap2-content">
         <a class="topTap2-content-inner">
             <a class="innerItem" v-for="(item,index) in items" @click.prevent="switchTo(router2[index])">
                <img :src="item.icon"/>
                <span>{{item.label}}</span>
             </a>
         </a>     
    </div>
</div>
</template>

<script>
export default {
  name: 'eleme',
    data(){
        return {

            items:[
                {label:'全部',icon:require("@/pages/images/tab2_all.png")},
                {label:'饿了么',icon:require("@/pages/images/tab2_eleme.png")},
                {label:'美团外卖',icon:require("@/pages/images/tab2_meituanwaimai.png")},
                {label:'大众点评',icon:require("@/pages/images/tab2_dazhong.png")},
                {label:'百度外卖',icon:require("@/pages/images/tab2-baiduwaimai.png")}
            ],

            router2:[
                '/waimai/all',
                '/waimai/eleme',
                '/waimai/mtwaimai',
                '/waimai/dazhong',
                '/waimai/nuomi'
            ]
          
        }
    },
    methods:{
      switchTo(path){
        this.$router.replace(path);
      }
    }
}
</script>


<style>
::webkit-scrollbar {
    display: none;
}

.topTap2{
    width: 100%;
    height: 90px;
    position: relative;
    background: #fff;
    padding: 10px 0;
}

.topTap2-content{
    width: 100%;
    overflow-x: scroll;
    
}

.topTap2-content-inner{
    width: 550px;
    height: 90px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.innerItem{
    width: 84px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.innerItem img{
    width: 70%;
    margin-bottom: 10px;
}
</style>